/*
 * @Description: 发车计划弹窗
 * @Author: ziwei.ma
 * @Date: 2019-10-23 10:34:01
 * @Last Modified by: ziwei.ma
 * @Last Modified time: 2019-10-25 21:54:54
 */
<template>
  <mask-module
    ref="mask"
    :isClickBgToHide="false"
  >
    <div class="starPlan_wrapper flex-v flex-vc">
      <div class="data">
        <div class="title fontsize32">发车计划</div>
        <div class="depart_time fontsize30">班次：{{startPlanDetail.departTime}}</div>
        <div class="dateTickets_wrapper flex-h flex-hw">
          <div
            class="dateTickets flex-v flex-vc flex-hc"
            v-for="(item,index) in startPlanDetail.dayList"
            :key="index"
          >
            <span class="fontsize28 baseColorNoAcitve">{{item.DATE}}</span>
            <span class="fontsize24">{{item.DEPART_TYPE | ticketsFilters}}</span>
          </div>
        </div>
      </div>
      <div
        class="close_btn baseColorNoAcitve fontsize36"
        @click="onClose"
      >关闭</div>
    </div>
  </mask-module>
</template>
<script>
import AnimatedDialog from '@/components/animateddialog/AnimatedDialog'
export default {
  components: {
    'mask-module': AnimatedDialog
  },
  props: {
    startPlanDetail: {
      type: Object,
      default: null
    }
  },
  computed: {
    mask() {
      return this.$refs.mask
    }
  },
  data() {
    return {
      textareaValue: ''
    }
  },
  methods: {
    onClose() {
      this.mask.hide()
    }
  },
  filters: {
    ticketsFilters(val) {
      // DEPART_TYPE：1、发车；2、不发车
      if (val === 1) {
        return '发车'
      } else {
        return '无'
      }
    }
  },
  mounted() {
    console.log(this.startPlanDetail.dayList)
  }
}
</script>
<style scoped>
.starPlan_wrapper {
  width: 686px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
}
.data {
  width: 100%;
  padding: 16px 26px 66px 26px;
  box-sizing: border-box;
}
.title {
  margin-bottom: 16px;
  text-align: center;
}
.depart_time {
  color: #666666;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dateTickets_wrapper {
  width: 100%;
}
.dateTickets {
  width: 78px;
  height: 88px;
  margin: 6px;
  background: rgba(240, 244, 253, 1);
  border-radius: 4px;
}
.close_btn {
  height: 96px;
  width: 100%;
  text-align: center;
  line-height: 96px;
  border-top: 2px solid #999999;
}
</style>
